<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>出库单</title>
		<link rel="stylesheet" href="${ctx}/css/H-ui.min.css" />
		<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
		<style type="text/css">
		    .outbound_order>p>a{font-size: 14px;margin-left: 15px;color: #62affc;}
			.outbound_order{padding-left:0;padding-right:0;width: 100%;height: 700px;background: #f8f8f8;margin:0;}
		    .outbound_order>p{display: flex;height: 50px;line-height: 50px;border-bottom: 1px solid #efefef;margin-bottom: 0;}
		    .search{position: relative;}
		    .search input{padding-left:30px;height: 20px;border:1px solid #dddddd;border-radius: 10px;}
		    .search img{display: inline-block;width: 15%;position: absolute;left:5;top:7px}
		    .conent{background: #c7dde0;clear: both;overflow: hidden;}
		    .row{margin-left: 0;margin-right: 0;}
		    .col-sm-3>p{height: 40px;background: #FFFFFF;line-height: 40px;text-align: center;margin-bottom: 0;}
		    .col-sm-3 ul{height: 160px;background: #f3f3f3;padding-top: 10px;}
		    .col-sm-3 ul li{line-height: 35px;text-indent: 3em;}
		    .col-sm-3 ul li span{display:inline-block;text-indent: 6em;}
		    .state{height: 70px;border-bottom: 1px solid #efefef;display: flex;justify-content: space-between;line-height: 70px;background:#fff;}
		    #contable tr{height: 35px;}
		    .state>p>img{
		      width:8%;
		      margin-left:15px;
		    }
		    .state>p .img2{
		      width:10%;
		    }
		    .imgWidth{
				width:30%;
			}
			.search>input{
			  background:url(../../imgs/search.png) no-repeat left center;
			  background-size:13%;
			}

		</style>
	</head>
	<body>
		<div class="container outbound_order">
			<p>
				<a href="index.html">返回</a>
				<span style="text-indent: 35em;" id="showSpen">新建销售单</span>
			</p>
			<div class="state">
				<p>
				    <span></span>
					<img src="${ctx}/imgs/lb02.png" alt="" id="button" style="cursor: pointer;" onclick="clickImg()" class="clickspan"/>
					<img src="${ctx}/imgs/sx.png" alt="" class="img2"/>
				</p>
				<p class="search">
				   <input type="text" name="" id="" placeholder="流水号/相关号/款号.."/>
				</p>
			</div>
			<div class="conent" id="conent">
				<div class="row" style="margin-top:15px;">
					<div class="col-sm-3">
						<p>神舟数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					
				</div>
				
				<div class="row">
					<div class="col-sm-3">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
						    <li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					
				</div>
				<div class="row">
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span style="text-indent:5em">1276.00</span></li>
							<li>待收金额：<span style="text-indent:5em">1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="conent" id="conent2" style="background: #FFFFFF;display: none;">
				<table class="table table-border" id="contable">
					<thead>
						<tr>
							<td><input type="checkbox" name="" id="" value="" /></td>
							<td>销售单号</td>
							<td>客户名称</td>
							<td>联系电话</td>
							<td>销售时间</td>
							<td>销售数量</td>
							<td>销售数量</td>
							<td>出入库</td>
							<td>收款</td>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
		<script>
			//创建table表格：
			$(function(){
				var length = 37;
				var str ='';
				for(var i=0;i<37;i++){
					str +="<tr><td><input type='checkbox' name='' id=''></td><td>XS210</td><td>神州数码</td><td>13567246303</td><td>2017-2-28</td><td>5</td><td>1,267.00</td><td width='100'><img src='${ctx}/imgs/rk.png' class='imgWidth'></td><td width='100'><img src='${ctx}/imgs/sk.png' class='imgWidth'></td></tr>"
				}
				$('#contable tbody').append(str)
			});
			//点击button图标切换div内容：
			$(function(){
		      $('#button').click(function(){
		      	 var status = $('#conent').css('display');
			     if(status == 'block'){
			 	    $('#conent').hide();
			 	    $('#conent2').show();
			 	   $("#clickSpan").removeClass('clickspan');//移除此类
			       $(this).addClass("bgSpan");//点击时添加此类
			    }else{
			 	    $('#conent').show();
			 	    $('#conent2').hide();
			 	    $("#clickSpan").removeClass('bgSpan');
			        $(this).addClass("clickspan");
			    }
		      })

			})
		</script>
	</body>
</html>
